<template>
    <!--我可是有底线的-->
    <div class="base-line">
        <span class="base-line-text">我可是有底线的</span>
        <s class="line"></s>
    </div>
</template>

<script>
    export default {
        name: "Baseline"
    }
</script>

<style lang="less" scoped>
    .base-line {
        position: relative;
        line-height: 62px;
        height: 62px;
        text-align: center;
        margin: auto;
        user-select: none;

        .base-line-text {
            position: relative;
            padding: 0 30px;
            font-size: 15px;
            letter-spacing: 0.2em;
            background-color: #fff;
            z-index: 1;
            text-decoration: none;
        }

        a.get-more-link:hover {
            text-decoration: underline;
            color: rgb(149, 177, 255);
        }

        s.line {
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #000;
        }
    }
</style>